<template>
    <div id="organization">
        <el-table :data="tableData" style="width: 100%" row-key="id" border lazy :expand-row-keys="expandRowKeys"
            ref="tables" :load="load" :tree-props="{ hasChildren: 'hasChildren' }">
            <el-table-column prop="name" label="部门名称">
            </el-table-column>
            <el-table-column prop="description" label="部门描述">
            </el-table-column>
            <el-table-column prop="principleName" label="部门负责人">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作" width="360">
                <template slot-scope="scope">
                    <el-button type="primary" plain size="mini" v-if="hasPrivilege('organization:user')"
                        @click="userManagement(scope.$index, scope.row)">人员管理
                    </el-button>
                    <el-button type="primary" plain size="mini" v-if="hasPrivilege('organization:add')"
                        @click="addDepartment(scope.$index, scope.row)">添加下属部门
                    </el-button>
                    <el-button type="primary" plain size="mini" v-if="hasPrivilege('organization:edit')"
                        @click="editDepartment(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button type="danger" plain size="mini" v-if="hasPrivilege('organization:delete')"
                        @click="deleteDepartment(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <OrganizationEditor ref="organizationEditor" />
        <OrganizationUserManager ref="OrganizationUserManager" />
    </div>
</template>

<script>

import { systemApi, commonApi } from "../../api/api";
import OrganizationEditor from "./OrganizationEditor";
import OrganizationUserManager from "./OrganizationUserManager";
import tables from "@/utils/tables";
import form from "@/utils/form";

export default {
    components: {
        OrganizationEditor,
        OrganizationUserManager
    },
    mixins: [
        tables, form
    ],
    data() {
        return {
            tableData: [],
            expandRowKeys: [],
            expandList: [],
        }
    },
    created() {
        this.submit(0);
    },
    methods: {
        submit(parentId) {
            systemApi.organizationList({ parentId }).then(res => {
                this.loadList(res);
            }, commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage);
        },
        load(tree, treeNode, resolve) {
            systemApi.organizationList({ parentId: tree.id }).then(res => {
                let list = res.data.data;
                if (list.length > 0) {
                    list.forEach(e => e.hasChildren = true);
                }
                resolve(list)
            }, commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage);
        },
        addDepartment(index, row) {
            this.$refs['organizationEditor']
                .setData('type', 'add')
                .setData('form', { parentId: row.id })
                .setData('dialogFormVisible', true)
                .setData('organizationName', row.name)
            sessionStorage.removeItem("validator.organizationname", row.name)
        },
        userManagement(index, row) {
            this.$refs['OrganizationUserManager']
                .setData("dialogTableVisible", true)
                .setData("search", { organizationId: row.id, size: 10, current: 1 })
                .setData("principleId", row.principleId)
                .setData("organizationName", row.name);


        },
        editDepartment(index, row) {
            this.$refs['organizationEditor']
                .setData('form', { ...row })
                .setData('type', 'edit')
                .setData('dialogFormVisible', true)
                .setData('organizationName', row.name)
            sessionStorage.setItem("validator.organizationname", row.name)
        },
        deleteDepartment(index, row) {
            this.confirmOperation('此操作将永久删除该部门以及下属部门, 是否继续?', (data) => {
                systemApi.deleteOrganization(data).then(commonApi.popoverSuccessMessage,
                    commonApi.popoverErrorMessage).catch(commonApi.popoverErrorMessage);
            }, { 'id': row.id })
        }
    }
}
</script>

<style>

</style>